<template>
    <div class="monthbox">
       <div class="title">
        <span class="ns">月度收入</span>
        <span class="ds">
            <el-date-picker v-model="year" type="year" :clearable="false" size="mini" style="width:100px" value-format="yyyy"
                            format="yyyy年">
            </el-date-picker>
        </span>
       </div>
        <div id="month-task" style="height:180px"></div>
    </div>
</template>

  <script>
  import * as echarts from 'echarts'
  import Chart from '@/module/ana-charts'
  export default {
    data () {
      return {
        year: new Date().getFullYear() + '',
        defineTaskList: [
          {
            key: '1月',
            value: 100
          },
          {
            key: '2月',
            value: 150
          },
          {
            key: '3月',
            value: 350
          },
          {
            key: '4月',
            value: 300
          },
          {
            key: '5月',
            value: 300
          },
          {
            key: '6月',
            value: 200
          },
          {
            key: '7月',
            value: 400
          },
          {
            key: '8月',
            value: 300
          },
          {
            key: '9月',
            value: 200
          },
          {
            key: '10月',
            value: 90
          },
          {
            key: '11月',
            value: 300
          },
          {
            key: '12月',
            value: 420
          }
        ]
      }
    },
    computed: {
      options () {
        return {
          title: {
            text: ''
          },
          grid: {
            right: '2%'
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#33317E'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            }
          },
          yAxis: {
            name: '',
            nameTextStyle: {
              color: '#333333'
            },
            axisLine: {
              lineStyle: {
                color: '#33317E'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            },
            itemStyle: {
              color: '#333333'
            }
          },
          tooltip: {
            formatter (v) {
              const val = v[0].name.split(',')
              return `${val[0]} (${v[0].value})`
            }
          },
          series: [{
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#918EF2' },
                    { offset: 1, color: '#34327F' }
                  ]
                )
              }
            }
          }]
        }
      }
    },
    mounted () {
      const myChart = Chart.bar('#month-task', this.defineTaskList, {})
      myChart.echart.setOption(this.options)
    }
  }
  </script>

  <style lang="scss" scoped>
</style>
